<template>
	<view>
		<view class="m-card">
			<view class="m-cell">
				<view class="m-cell-left">
					<text>发票类型</text>
				</view>
				<view class="m-cell-right">
					<view class="m-cell-btn" @click="selectTypeFun(item)"
						:class="{'m-cell-btn__active':form.type == item.value}" v-for="(item,index) in typeList"
						:key="index">
						<text>{{item.title}}</text>
					</view>
				</view>
			</view>
			<view class="m-cell">
				<view class="m-cell-left">
					<text>发票内容</text>
				</view>
				<view class="m-cell-right">
					<view class="m-cell-btn m-cell-btn__active">
						<text>{{form.content}}</text>
					</view>
				</view>
			</view>
			<view class="m-cell">
				<view class="m-cell-left">
					<text>抬头类型</text>
				</view>
				<view class="m-cell-right">
					<view class="m-cell-btn" :class="{'m-cell-btn__active':tabCurrent == index}"
						@click="tabCurrent = index" v-for="(item,index) in tabList" :key="index">
						<text>{{item.title}}</text>
					</view>
				</view>
			</view>
			<view class="m-cell">
				<view class="m-cell-left">
					<text>抬头名称</text>
				</view>
				<view class="m-cell-right">
					<input type="text" v-model="form.company"  :placeholder="tabCurrent == 1?'单位名称':'姓名'">
					<view class="m-cell-icon" v-if="tabCurrent == 1" @click="to_link('/pages2/hotel-invoice-title/hotel-invoice-title')">
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
			<view class="m-cell" v-if="tabCurrent == 1">
				<view class="m-cell-left">
					<text>单位税号</text>
				</view>
				<view class="m-cell-right">
					<input type="text" v-model="form.tax_num" placeholder="单位税号">
				</view>
			</view>
		</view>
		
		<view class="m-card">
			<view class="m-cell">
				<view class="m-cell-left">
					<text>电子邮箱</text>
				</view>
				<view class="m-cell-right">
					<input type="text" v-model="form.email" placeholder="用于接收发票">
				</view>
			</view>
		</view>
		
		<view class="m-title">
			<text>开票须知</text>
		</view>
		<view class="m-content">
			<text>1、线上不支持拆分、合并发票，请到酒店前台办理
2、申请电子发票的会员，在前台确认后，开票时填写的邮箱可接收到电子发票的邮件
3、申请纸质发票/纸质专票的会员，请到酒店前台办理</text>
		</view>
		
		<view class="m-bottom">
			<view class="m-bottom-btn" @click="to_back()">
				<text>取消</text>
			</view>
			<view class="m-bottom-btn m-bottom-btn__extend" @click="submitFun">
				<text>确定</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList: [{
					title: '个人',
					value: 0
				}, {
					title: '单位',
					value: 1
				}],
				typeList: [{
					title: '普票',
					value: 0
				}, {
					title: '增值专票',
					value: 1
				}],
				tabCurrent: 0,
				form: {
					id: '',
					type: 0,
					content: '商品明细',
					company: '',
					tax_num: '',
					email: '',
				}
			}
		},
		onLoad(opt) {
			this.form.id = opt.id
			uni.$on('selectInvoiceTitle',(item)=>{
				this.form.company = item.header_title
				this.form.tax_num = item.tax_no
			})
		},
		methods: {
			selectTypeFun(item) {
				this.form.type = item.value
			},
			submitFun() {
				if(this.tabCurrent == 0){
					if(!this.form.company){
						return this.$m.msg('请输入姓名')
					}
				}else{
					if(!this.form.company){
						return this.$m.msg('请输入单位名称')
					}
					if(!this.form.tax_num){
						return this.$m.msg('请输入单位税号')
					}
				}
				if(!this.form.email){
					return this.$m.msg('请输入邮箱')
				}
				this.$http.getJson('hotal_applyInvoice',this.form).then(res=>{
					if(res.code == 1){
						this.$m.msg('提交成功',()=>{
							this.to_back()
						})
					}else{
						this.$m.msg(res.message)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f6f6f6;
	}

	.m-card {
		background: #fff;
		padding: 0 25rpx;
		margin-top: 20rpx;

		.m-cell {
			display: flex;
			align-items: center;
			height: 105rpx;
			border-bottom: 1px solid #E6E2DE;

			.m-cell-left {
				width: 172rpx;
				font-size: 28rpx;
				color: #76706B;
			}

			.m-cell-right {
				display: flex;
				align-items: center;
				flex: 1;
				height: 100%;

				input {
					flex: 1;
				}

				.m-cell-icon {
					display: flex;
					align-items: center;
					font-size: 30rpx;
					color: #76706B;
					padding: 20rpx;
				}

				.m-cell-btn {
					display: flex;
					align-items: center;
					padding: 0 30rpx;
					height: 64rpx;
					background: #FFFFFF;
					border-radius: 36rpx 36rpx 36rpx 36rpx;
					border: 2rpx solid #E6E2DE;
					font-size: 28rpx;
					color: #76706B;
					margin-right: 20rpx;
				}

				.m-cell-btn__active {
					border-color: #D3A358;
					color: #D3A358;
				}
			}
		}
	}
	
	.m-title{
		font-size: 32rpx;
		color: #33302D;
		font-weight: 600;
		padding: 60rpx 25rpx 30rpx;
	}
	.m-content{
		font-size: 28rpx;
		color: #76706B;
		line-height: 42rpx;
		padding: 0 25rpx 30rpx;
	}
	
	.m-bottom{
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		bottom: 150rpx;
		width: 750rpx;
		.m-bottom-btn{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 341rpx;
			height: 104rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			border: 1rpx solid #E6E2DE;
			font-size: 32rpx;
			color: #9B958F;
		}
		.m-bottom-btn__extend{
			background: #D3A358;
			border-color: #D3A358;
			color: #fff;
			margin-left: 20rpx;
		}
	}
</style>